| 通过file按钮上传的图片如何显示出来 FileReader | 您所在的位置：网站首页 › h5 filereader › 通过file按钮上传的图片如何显示出来 FileReader |
|
参考个人博客：http://www.zhuzhuman.com/nav-1/type-1/article/19.html 当我们使用file类型的按钮上传图片的时候，有时候希望图片能显示在页面里，那么如何显示呢？ 使用file的onchange事件可以监听到上传按钮是否发生了上传。如果这时候获取它的value值，在部分浏览器上是可以获取到图片路径的。但是一些浏览器出于安全考虑，获取到的路径会全部变成"C:\fakepath\ + 文件名"的形式。而我们使用该路径去显示图片是无法显示的。 H5中有FileReader,用于读取文件。我们可以在file按钮onchange的时候，去读取上传文件的信息。从而获取上传图片的dataURL格式的数据(通过data协议显示图片 data:image/图片格式;base64,…)， ##FileReader使用方法## 1. 创建 new FileReader() var fr = new FileReader(); // 可使用window.FileReader是否为真来判断当前浏览器是否支持FileReader。 // if(window.FileReader) { // var fr = new FileReader(); // } 2. 事件 1. onabort 当读取操作被中止时调用 2. onerror 当读取操作发生错误时调用 3. onload 当读取操作成功完成时调用 4. onloadend 当读取操作完成时调用,不管是成功还是失败.该处理程序在onload或者onerror之后调用 5. onloadstart 当读取操作将要开始之前调用 6. onprogress 在读取数据过程中周期性调用 例： fr.onload = function(){ this.result; // 文件一旦开始读取，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，成功则result值为读取的结果。 }; 3. 状态常量 常量名 值 描述 —————————————————————————————————— EMPTY 0 还没有加载任何数据 LOADING 1 数据正在被加载 DONE 2 已完成全部的读取请求###4. 属性### 1. error 在读取文件时发生的错误。只读。 2. readyState 表明FileReader对象的当前状态. 值为状态常量中的一个。只读。 3. result 读取到的文件内容。这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的。只读。 ###5. 方法### 1. abort() 中止该读取操作.在返回时,readyState属性的值为DONE。当没在进行读取操作时(也就是readyState属性的值不为LOADING时),调用abort()方法会抛出该异常. 2. readAsArrayBuffer(指定的对象) 开始读取指定对象中的内容。读取的结果result属性中将包含一个ArrayBuffer对象，以表示所读取文件的内容。当读取操作完成时,readyState属性的值会成为DONE。 3. readAsBinaryString(指定的对象) 开始读取指定对象中的内容。当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之。同时,result属性中将包含所读取文件的原始二进制数据。 4. readAsDataURL(指定的对象) 开始读取指定对象中的内容。当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之。同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。 5. readAsText(指定的对象,编码形式) 第二个参数为可选参数，一个字符串,指定编码形式，默认'utf-8' 开始读取指定对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之。同时,result属性中将包含一个字符串以表示所读取的文件内容. file按钮获取文件的详细信息： var fileBtn = document.getElementById('btn'); // 获取上传文件信息 fileBtn.onchange = function () { var file = this.files[0]; // files代表上传的文件(可上传多个文件)，files[0],代表取上传文件的第一个。 console.log(file); // 是一个对象，显示上传文件的相关信息，有name文件名、size文件大小、type文件类型、最近上传时间等属性 if(file.type.indexOf('image') == -1) { alert('上传文件非图片'); }; // 上传文件的type属性，可以用来过滤上传文件案例： var showimg = document.getElementById('showimg'); var fileBtn = document.getElementById('btn'); // 获取上传文件信息 fileBtn.onchange = function () { var file = this.files[0]; if(window.FileReader) { var fr = new FileReader(); fr.readAsDataURL(file); fr.onload = function(e) { console.log(e.target); // e.target返回FileReader对象,里面包含：事件，状态，属性，结果等 console.log(this); // 同e.target返回结果一样,两者等价 console.log(e.target.result); // 读取的结果，dataURL格式的 showimg.src = this.result; // 图片可显示出来 }; } else { alert('暂不支持FileReader'); }; }; |
| CopyRight 2018-2019 实验室设备网 版权所有 |